<template>
  <!-- 维保管理--维保列表(原待确定维保列表)-->
  <div class="content-area">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="search-area">
      <div class="search-content">
        <div class="search-item search-time"><span>电梯类型:</span>
          <el-select v-model="searchData.argsTypeId" placeholder="请选择" clearable>
            <el-option v-for="item in eleTypeArr" :key="item.id" :label=item.label
                       :value=item.value></el-option>
          </el-select>
        </div>
        <div class="search-item search-time plain-special-place"><span>小区名称:</span>
          <el-input placeholder="请输入小区名称/地址" v-model="searchData.housingEstate" clearable></el-input>
        </div>
        <areaSelect v-on:getNowAreaPosition="getArea" :areaText="areaText"></areaSelect>
      </div>
      <div class="search-footer">
        <button class="search-btn" @click="lookupByConditions">查询</button>
      </div>
    </div>

    <!--内容-->
    <div class="main-content">
      <div class="content-info" style="width: 100%">
        <!-- 表格数据与翻页合并模块 -->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo" v-on:handlePageReload="pageReload"
                   v-on:selectChange="checkChange" ref="chooseEle"
                   v-on:getPageSize="searchByPageSize">
          <div slot="operate">
            <div class="some-operate">
              <!--<button class="some-btn">维保项目模板设置</button>-->
              <button class="some-btn some-btn-add" @click="createTask" v-if="pagePower['004002003']">批量生成计划</button>
            </div>
          </div>
          <div slot="special-operate">
            <span class="maintainIng">在保电梯<i class="mainNum">{{maintainNum}}</i>台</span>
            <el-checkbox v-model="unShow" @change="isUnShow">不显示正在维保中的电梯</el-checkbox>
          </div>
          <!-- 额外的操作以及其他因素 -->
          <el-table-column type="selection" width="55" fixed="left"></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="200">
            <template slot-scope="scope">
              <div class="item-route">
                <div class="item-route-link"
                     @click="$goRoute('/manage/eleFiles/eleList/eleDetail?from=chooseEle&registerCode='+ scope.row.registerCode)">
                  查看
                </div>
                <div class="item-route-link" v-if="pagePower['004002003']" @click="$goRoute( '/manage/maintainMgr/plainTask/addTask?code='+ scope.row.registerCode);">生成维保计划
                </div>
              </div>
            </template>
          </el-table-column>
        </DataTable>
      </div>
    </div>
  </div>
</template>
<script>
  import com from '../../../../js/common'
  // 表格
  import DataTable from "../../../../components/dataTable/dataTable"
  import HeadTop from "../../../../components/head-top/head-top"
  import unitData from "../../../../components/unitData/unitData"
  import areaSelect from "../../../../components/areaSelect/areaSelect"
  import {getTaskEle, getEleType} from '@/api/getData'

  export default {
    name: 'maintainRecord',
    components: {
      DataTable,
      HeadTop,
      unitData,
      areaSelect
    },
    data() {
      return {
        parentLoad: '加载中...',    // 加载状态
        pagePower: JSON.parse(com.getStore('pagePowers'))['004002'] ? JSON.parse(com.getStore('pagePowers'))['004002'] : {},
        maintainNum: 0, // 在保电梯数目
        unShow: false, // 是否显示已生成维保电梯
        searchData: {
          housingEstate: '', //小区名称
          argsTypeId: '',
          areaCode: '',
          isNotShow: 0,


        },
        elCodes: [],
        eleTypeArr: [],
        useTimeArr: [
          {
            value: '0',
            label: '五年以内'
          },
          {
            value: '1',
            label: '五年以上'
          }
        ],
        // 表格组件数据
        dataTableObj: {
          tableData: [],
          tableColumns: [
            {
              text: '序号',
              width: '60',
              attributeName: 'index'
            },
            {
              text: '电梯注册代码',
              width: '130',
              attributeName: 'registerCode'
            },
            {
              text: '电梯地址',
              width: '170',
              attributeName: 'address'
            },
            {
              text: '详细地址',
              width: '170',
              attributeName: 'detailAddress'
            },
            {
              text: '上次维保类型',
              width: '80',
              attributeName: 'lastMainTypeName'
            },
            {
              text: '距计划维保时间(天)',
              width: '100',
              attributeName: 'lastOverDayNum'
            },
            {
              text: '维保次数(次)',
              width: '80',
              attributeName: 'mainNum'
            }
          ],
          // 翻页的数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            pageNo: 1,
            searchStatus: 2,
          },
        },

        // 区域选择
        areaText: '区域选择:',
      }
    },
    // 页面装载中,此时获取后端数据
    mounted() {
      // 获取当前页面所需数据
      this.getTaskEleData();
      // 获取当前页面所需电梯类型数据
      this.getEleTypeData();
      // 定义数组删除方法
      Array.prototype.del = function (n) {
        if (n < 0) {
          return this;
        } else {
          return this.slice(0, n).concat(this.slice(n + 1, this.length));
        }
      }
    },
    methods: {
      // 获取页面所需数据
      getTaskEleData(obj) {
        this.dataTableObj.pageObj.searchStatus = 2;
        this.dataTableObj.tableData = [];
        getTaskEle({
          pageNo: this.dataTableObj.pageObj.pageNo,
          pageSize: this.dataTableObj.pageObj.pageSize,
          condition: this.searchData
        }).then((data) => {
          let infoArr = data.data.data.data;
          if (infoArr.length > 0) {
            this.maintainNum = data.data.data.foot.ingNum;
            let startPage = (this.dataTableObj.pageObj.pageNo - 1) * this.dataTableObj.pageObj.pageSize + 1;
            let defaultCheck = [];
            // 此时进行重新显示
            let taskEleCode = com.getStore('taskEleCode') ? JSON.parse(com.getStore('taskEleCode')) : false;
            // 先将数组合并,这是为了防止有其他用户在操作时出现混乱
            let allTaskEleCode = []
            // 判断是否已选择
            let nowPageSel
            if(taskEleCode){
              taskEleCode.forEach(v => {
                allTaskEleCode.push(...v)
              })

              // 对合并后的数组去重
              allTaskEleCode = com.uniqueArr(allTaskEleCode)
              // let nowPageSel = taskEleCode[this.dataTableObj.pageObj.pageNo - 1]
              nowPageSel = allTaskEleCode
            }else{
              nowPageSel = []
            }
            infoArr.forEach((i, e) => {
              i.index = startPage + e;
              i.detailAddress = i.housingEstate+i.entrance;
              if (taskEleCode && nowPageSel.length > 0) {
                nowPageSel.forEach( (f, j)=> {
                  if (f === i.registerCode) {
                    defaultCheck.push(i);
                  }
                });
              }
            });
            if (defaultCheck.length > 0) {
              this.toggleSelection(defaultCheck)
            }
          } else {
            this.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          this.dataTableObj.tableData = infoArr
          this.dataTableObj.pageObj.searchStatus = 1
          this.dataTableObj.pageObj.pageNum = data.data.data.totalRecord;
        }).catch((data) => {
          this.parentLoad = data.data.message    // loading(查询失败)
          this.dataTableObj.pageObj.searchStatus = 0
        })

      },
      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val;
        this.getTaskEleData();
      },
      // 切换第几页
      searchByPageNo(val) {
        // 切换每页数目
        this.dataTableObj.pageObj.pageNo = val;
        this.getTaskEleData();
        // 1 获取数组对应元素
        // 2.将参数与每列的eleCode对应，
        // 3.
      },

      // 按查询条件查找
      lookupByConditions: function () {
        this.getTaskEleData();
      },

      // 获取页面所需电梯类型数据
      getEleTypeData() {
        getEleType({}).then((data) => {
          let info = data.data.data;
          let eleTypeArr = []
          info.forEach(function (i) {
            eleTypeArr.push({'label': i.name, 'value': i.id})
          })
          this.eleTypeArr = eleTypeArr;
        }).catch((err) => {
          this.$message.error('查询电梯类型数据失败');
        })
      },

      // 获取查询地址
      getArea(res) {
        this.searchData.areaCode = res.code
      },

      //  批量生成维保计划勾选id
      checkChange(val, pageChange) {
        let elCodes = [];
        let taskEleCode = com.getStore('taskEleCode') ? JSON.parse(com.getStore('taskEleCode')) : [];
        val.forEach(function (i) {
          elCodes.push(i.registerCode);
        });
        taskEleCode[this.dataTableObj.pageObj.pageNo - 1] = elCodes;
        com.setStore('taskEleCode', JSON.stringify(taskEleCode));
      },

      // 是否显示已生成
      isUnShow(val) {
        if (val) {
          this.searchData.isNotShow = 1;
          this.getTaskEleData();
        } else {
          this.searchData.isNotShow = 0;
          this.getTaskEleData();
        }
      },

      // 默认勾选
      toggleSelection(rows) {
        this.$refs.chooseEle.toggleChange(rows);
      },

      // 批量生成维保计划
      createTask() {
        let idArr = com.getStore('taskEleCode') ? JSON.parse(com.getStore('taskEleCode')):[];
        let checkCodes = [];
        idArr.forEach(function (e, i) {
          if (e.length > 0) {
            for (let j of e) {
              checkCodes.push(j)
            }
          }
        });
        if (checkCodes.length <= 0) {
          this.$message.warning('请至少选择一条电梯进行操作');
        } else {
          this.$router.push({path:'/manage/maintainMgr/plainTask/addTask'})
        }
      },

      // 页面刷新
      pageReload(){
        this.getTaskEleData();
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../../style/entry/components/pageCommon";

  .mainNum {
    color: #F05459;
  }
  .plain-special-place.search-time input.el-input__inner{
    padding-left: 5px!important;
  }
</style>
